<template>
  <view class="content">
    <view class="header">
      <view class="title">特色电影</view>
      <view class="tab-box">
        <view
          class="tab-item"
          :class="current === 0 ? 'active-item' : ''"
          @click="change(0)"
          >正在热映</view
        >
        <view
          class="tab-item"
          :class="current === 1 ? 'active-item' : ''"
          @click="change(1)"
          >即将上映</view
        >
      </view>
    </view>
    <scroll-view class="film-list" :scroll-y="true">
      <view class="film-item" v-for="item in dataSource" :key="item.id">
        <u-image
          :src="require('@/static/images/movie/' + item.imgSrc)"
          width="210rpx"
          height="310rpx"
          mode="scaleToFill"
        ></u-image>
        <view class="info-box">
          <view class="title">{{ item.title }}</view>
          <view class="desc">类型 {{ item.types.join(' ') }}</view>
          <view class="desc">地区 {{ item.region }}</view>
          <view class="desc">片长 {{ item.duration }}</view>
          <view class="desc">评分 {{ item.score }}</view>
          <u-button
            type="primary"
            size="mini"
            :plain="current === 1 ? true : false"
            @click="purchaseTicket(item.id)"
            >立即购票</u-button
          >
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script lang="ts">
import { defineComponent, ref } from '@vue/composition-api';
// eslint-disable-next-line @typescript-eslint/no-var-requires
const data = require('@/mock/movie/index.json');
// eslint-disable-next-line @typescript-eslint/no-var-requires
const movieType = require('@/mock/movie-type/index.json');
import PAGE from '@/const/page';

export default defineComponent({
  onLoad() {
    this.dataSource = data.movies;

    this.dataSource.forEach((item: any) => {
      item.types = [];
      movieType.types.forEach((type: any) => {
        if (item.movieType.includes(type.id)) {
          item.types.push(type.name);
        }
      });
    });
    console.log(this.dataSource);
  },
  setup() {
    const current = ref(0);
    const dataSource = ref([]);
    return {
      current,
      dataSource,
    };
  },
  methods: {
    change(index: number) {
      this.current = index;
    },
    purchaseTicket(id: string) {
      if (this.current === 1) return;
      uni.navigateTo({
        url: PAGE.FILM_DETAIL.PATH + '?id=' + id,
      });
    },
  },
});
</script>

<style lang="scss" scoped>
.header {
  width: 100%;
  height: 300rpx;
  background-image: url('@/static/images/chooseSeat.png');
  background-size: cover;
  padding: 0rpx 48rpx;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;

  .title {
    color: white;
    font-size: 38rpx;
    font-weight: 700;
  }

  .tab-box {
    width: 100%;
    height: 88rpx;
    background-color: rgba(255, 255, 255, 0.125);
    padding: 17rpx 15rpx;
    display: flex;
    border-radius: 16rpx;
    margin-top: 42rpx;
    margin-bottom: 32rpx;

    .tab-item {
      height: 54rpx;
      flex-grow: 1;
      text-align: center;
      line-height: 54rpx;
      color: #fff;
      font-weight: 500;
      border-radius: 20rpx;
    }

    .active-item {
      background-color: #fff;
      color: #000;
    }
  }
}

.film-list {
  width: 100%;
  height: calc(100vh - 300rpx - 100rpx - 40rpx);
  padding-top: 40rpx;
  padding-left: 40rpx;

  .film-item {
    display: inline-flex;
    margin-bottom: 40rpx;

    .info-box {
      width: calc(100vw - 120rpx - 210rpx);
      margin-left: 40rpx;

      .title {
        font-size: 32rpx;
        font-weight: 700;
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      .desc {
        font-size: 24rpx;
        color: #666;
        margin: 10rpx 0rpx;
      }

      ::v-deep .u-btn {
        margin-top: 20rpx;
      }
    }
  }
}
</style>
